import { createRouter, createWebHashHistory, type RouteRecordRaw } from "vue-router";

// 一级页面
import Mapper from "@/pages/Mapper.vue";
import Playlist from "@/pages/Playlist.vue";
import Settings from "@/pages/Settings.vue";
import Star from "@/pages/Star.vue";

// 二级页面
// Mapper
const EmptyMapper = () => import("@/components/mapper/EmptyMapper.vue");
const KeyMapper = () => import("@/components/mapper/KeyMapper.vue");

// Star
const StarShow = () => import("@/components/star/StarShow.vue");
const Starlist = () => import("@/components/star/Starlist.vue");

// 路由
const routes: RouteRecordRaw[] = [
    {
        path: "/",
        redirect: "/playlist",
    },
    {
        path: "/mapper",
        component: Mapper,
        children: [
            { path: "", redirect: "/mapper/empty" },
            { path: "default", redirect: "/mapper/empty" },
            { path: "empty", component: EmptyMapper },
            { path: "key", component: KeyMapper },
        ],
        meta: {
            height: 3,
        },
    },
    { path: "/playlist", component: Playlist, meta: { height: 2 } },
    { path: "/settings", component: Settings, meta: { height: 4 } },
    {
        path: "/star",
        component: Star,
        children: [
            { path: "", component: StarShow },
            { path: "show", redirect: "/star" },
            { path: "list/:name", component: Starlist },
        ],
        meta: {
            height: 1,
        },
    },
];

// 路由器
const router = createRouter({
    routes,
    history: createWebHashHistory(),
});

// 路由过渡效果
router.afterEach((to, from) => {
    // 上下过渡
    if ("height" in to.meta && "height" in from.meta) {
        const toHeight = <number>to.meta.height;
        const fromHeight = <number>from.meta.height;

        const transition = toHeight < fromHeight ? "slide-down" : "slide-up";
        from.meta.transition = transition;
        to.meta.transition = transition;
    }
});

export default router;
